<template>
  <view class="clock-container">
    <!-- 右上角按钮 -->
    <view class="menu-btn">
      <view
        class="dot-text Flex iconfont icon-fanhui"
        @click="fnGoIndex"
      ></view>
      <view class="dot"></view>
      <view
        @click="openInput"
        class="dot-text Flex iconfont icon-shezhi"
      ></view>
    </view>

    <view class="date">{{ dateText }}</view>

    <view class="time">
      <!-- 小时 -->
      <view class="digit-group">
        <view class="digit-box">
          <view class="digit">{{ hour[0] }}</view>
        </view>
        <view class="digit-box">
          <view class="digit">{{ hour[1] }}</view>
        </view>
        <text class="label">时</text>
      </view>

      <text class="colon">:</text>

      <!-- 分钟 -->
      <view class="digit-group">
        <view class="digit-box">
          <view class="digit">{{ minute[0] }}</view>
        </view>
        <view class="digit-box">
          <view class="digit">{{ minute[1] }}</view>
        </view>
        <text class="label">分</text>
      </view>

      <text class="colon">:</text>

      <!-- 秒钟 -->
      <view class="digit-group">
        <view class="digit-box">
          <view class="digit">{{ second[0] }}</view>
        </view>
        <view class="digit-box">
          <view class="digit">{{ second[1] }}</view>
        </view>
        <text class="label">秒</text>
      </view>
    </view>

    <view class="slogan">
      <text>{{ slogan }}</text>
    </view>

    <!-- 弹窗蒙层 -->
    <view class="modal-overlay" v-show="showInput" @click="cancelInput"></view>

    <!-- 输入框弹窗 -->
    <view class="input-box" v-show="showInput">
      <view class="title">✨ 提示文字 ✨</view>
      <input
        type="text"
        v-model="tempText"
        placeholder="请输入要显示的文字"
        maxlength="20"
      />
      <view class="button-group">
        <button class="cancel-btn" @click="cancelInput">取消</button>
        <button class="confirm-btn" @click="confirmInput">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      slogan: "新的黎明，新的一天。",
      tempText: "",
      showInput: false,
      dateText: "",
      hour: "00",
      minute: "00",
      second: "00",
      timer: null,
    };
  },

  onReady() {
    this.updateTime();
    this.timer = setInterval(this.updateTime, 1000);
  },

  methods: {
    // 返回上一页
    fnGoIndex() {
      uni.navigateBack();
    },

    updateTime() {
      const now = new Date();

      // 更新时间显示
      this.hour = this.padZero(now.getHours());
      this.minute = this.padZero(now.getMinutes());
      this.second = this.padZero(now.getSeconds());

      // 更新日期显示
      this.dateText = this.formatDate(now);
    },

    formatDate(date) {
      const hours = this.padZero(date.getHours());
      const minutes = this.padZero(date.getMinutes());
      const day = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][
        date.getDay()
      ];
      return `${hours}.${minutes} ${day}`;
    },

    padZero(num) {
      return String(num).padStart(2, "0");
    },

    openInput() {
      this.showInput = true;
      this.tempText = this.slogan; // 初始化临时文字为当前显示的文字
    },

    cancelInput() {
      this.showInput = false;
      this.tempText = ""; // 清空临时文字
    },

    confirmInput() {
      if (this.tempText.trim()) {
        this.slogan = this.tempText; // 只有在确认时才更新显示的文字
      }
      this.showInput = false;
      this.tempText = "";
    },
  },

  onUnmounted() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>



<style>
.clock-container {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.time {
  display: flex;
  align-items: flex-start;
  gap: 20rpx;
}

.digit-group {
  display: flex;
  gap: 8rpx;
  position: relative;
}

.digit-box {
  width: 80rpx;
  height: 120rpx;
}

.digit {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 120rpx;
  font-weight: bold;
  font-family: "Digital-7", monospace;
  background: #222;
  border-radius: 8rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.colon {
  font-size: 80rpx;
  opacity: 0.5;
  margin: 0 10rpx;
  line-height: 120rpx;
}

.label {
  position: absolute;
  bottom: -40rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24rpx;
  color: #666;
  letter-spacing: 2rpx;
}

.date {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 20rpx;
  letter-spacing: 2rpx;
}

.slogan {
  margin-top: 60rpx;
  text-align: center;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  z-index: 998;
}

.input-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  padding: 20rpx;
  width: 500rpx;
  box-sizing: border-box;
  border-radius: 30rpx;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  z-index: 999;
}

.input-box .title {
  color: #fff;
  font-size: 32rpx;
  margin-bottom: 30rpx;
  font-weight: 500;
}

.input-box input {
  height: 88rpx;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16rpx;
  padding: 0 30rpx;
  color: #fff;
  font-size: 28rpx;
  margin-bottom: 30rpx;
}

.input-box input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.button-group {
  display: flex;
  justify-content: space-between;
  gap: 30rpx;
}

.input-box button {
  width: 45%;
  height: 62rpx;
  line-height: 62rpx;
  padding: 0 40rpx;
  border-radius: 36rpx;
  font-size: 28rpx;
  font-weight: normal;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.confirm-btn {
  background: linear-gradient(135deg, #007aff, #00c6ff);
  border: none;
}

.input-box button:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.menu-btn {
  position: fixed;
  top: 9rpx;
  left: 20rpx;
  min-width: 70px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  z-index: 100;
}
.dot-text {
  font-size: 18rpx;
  width: 40px;
  height: 100%;
}
.dot {
  width: 6rpx;
  height: 6rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
}

.menu-btn:active {
  background: rgba(255, 255, 255, 0.2);
}
</style>

